<template>
	<view class="content" v-if="Object.keys(orderInfo).length > 0">
		<view class="dubox">
			<!-- <view class="xiaotxt" @click="show = true" v-if="orderInfo.status == 1">
				<text v-if="orderInfo.writer_uid == $db.get('userInfo').membe_id">拒绝订单</text>
				<text v-else >取消订单</text>
			</view> -->
			<!-- 用户 -->
			<block v-if="orderInfo.writer_uid != $db.get('userInfo').membe_id && orderInfo.ref_status_fb != 2 && orderInfo.is_acceptance == 0">
				<view class="xiaotxt" @click="showPop = true"  v-if="orderInfo.status == 2 || orderInfo.status == 3">
					更多操作
				</view>
				
				<view class="xiaotxt" @click="show = true" v-if="orderInfo.status == 1">
					取消订单
				</view>
				
				<view class="xiaotxtl" @click="$go('/pages/user/evaluate?id='+orderInfo.id)"
					v-if="orderInfo.status ==4 && !orderInfo.is_eval">
					订单评价
				</view>
				<view class="xiaotxt xiaotxt_green" v-if="orderInfo.status ==4 && orderInfo.is_eval == 1 && orderInfo.order_eval" @tap="$go('/showcase/showcase/evaluateinfo?id='+orderInfo.id)">
					查看评价
				</view>
			</block>
			
			 
			 <!-- 10.16新增 写手-->
			 <block v-if="orderInfo.writer_uid == $db.get('userInfo').membe_id && orderInfo.ref_status_fb != 2 && orderInfo.is_acceptance == 0">
				 <view class="xiaotxt" @click="show = true"  v-if="orderInfo.status == 1">
				  	拒绝订单
				  </view>
				  <view class="xiaotxt" @click="showPop = true" v-if="orderInfo.status == 2 || orderInfo.status == 3">
				  	更多操作
				  </view>
				  <view class="xiaotxt xiaotxt_green" v-if="orderInfo.status ==4 && orderInfo.is_eval == 1 && orderInfo.order_eval" @tap="$go('/showcase/showcase/evaluateinfo?id='+orderInfo.id)">
				  	查看评价
				  </view>
			 </block>
			
			<view class="title">
				服务进度
			</view>
			<view class="jietxt">
				<text v-if="orderInfo.status == 4 && orderInfo.is_acceptance">该订单申诉已处理，订单已完成</text>
				<text v-else-if="orderInfo.status == 5 && orderInfo.is_acceptance">平台审核完成，该订单将退款取消处理，如有异议请申请复议</text>
				
				<text v-else-if="orderInfo.res_status == 1"><block v-if="orderInfo.res_u && orderInfo.res_u.status == '待处理'">用户</block> <block v-if="orderInfo.res_w && orderInfo.res_w.status == '待处理'">写手</block>申请订单申诉，平台将会介入处理，处理期间订单状态暂停</text>
				<text v-else-if="orderInfo.ref_status_fb == 2">
					<block v-if="orderInfo.writer_uid == $db.get('userInfo').membe_id">订单金额将通过原支付渠道退回</block>
					<block v-else>您已同意退款申请，订单已取消</block>
				</text>
				<block v-else>
					<text v-if="orderInfo.status == 1">请在三天内确认接单，超时接单订单将自动取消</text>
					<text v-if="orderInfo.status == 2">
						<block v-if="orderInfo.ref_status ==1 && orderInfo.is_tk == 0">用户申请退款，超时未处理会自动同意退款</block>
						<block v-else>写手创作中，要记得按时交稿哦</block>
					</text>
					<text v-if="orderInfo.status == 3">
						<block v-if="orderInfo.ref_status ==1 && orderInfo.is_tk == 0">用户申请退款，超时未处理会自动同意退款</block>
						<block v-else-if="orderInfo.is_gai == 0">三天内未处理稿件，将自动完成该订单</block>
						<block v-else-if="orderInfo.is_gai == 1">用户已提交修改意见，请修改稿件</block>
					</text>
					<!-- <text v-if="orderInfo.status == 4">订单完成，快去查看小金库吧</text> -->
					<text v-if="orderInfo.status == 4">
						<block v-if="orderInfo.is_eval == 0">订单已完成，等待用户评价</block>
						<block v-if="orderInfo.is_eval == 1">用户已评价，快来查看吧</block>
					</text>
					
					<text v-if="orderInfo.status == 5">
						<block v-if="orderInfo.qx_type == 0">订单结束，系统取消了订单</block>
						<block v-if="orderInfo.qx_type == 1">订单结束，对方取消了订单</block>
						<block v-if="orderInfo.qx_type == 2">订单结束，您拒绝了该订单</block>
					</text>
				</block>
			</view>
			
			<view class="new-step-box" v-if=" orderInfo.status == 5 && orderInfo.is_acceptance == 1 && orderInfo.ss_status == 2">
				<view class="new-step-top display-flex">
					<block v-for="(it,ix) in endStatusList3" :key="ix">
						<view class="circle"
							:class="{'pass': ix < 3,'stop': ix == 2 || ix == 3}">
							<text></text>
						</view>
						<text class="line" style="width: 170rpx;" v-if="ix < endStatusList3.length - 1"
							:class="{'activeLine' : ix < 1,'stopLine': ix == 1,'stopLine3': ix == 2}"></text>
					</block>
				</view>
				<view class="new-step-bot display-flex">
					<block v-for="(it,ix) in endStatusList3" :key="ix">
						<text
							:class="{'pass' : ix < 3,'stop': ix == 2 || ix == 3}">
							<block >{{it}}</block>
						</text>
					</block>
				</view>
			</view>
			<view class="new-step-box" v-if=" orderInfo.status == 4 && orderInfo.is_acceptance == 1 && orderInfo.ss_status == 2">
				<view class="new-step-top display-flex">
					<block v-for="(it,ix) in endStatusList31" :key="ix">
						<view class="circle"
							:class="{'pass': ix < 3,'stop': ix == 2 || ix == 3}">
							<text></text>
						</view>
						<text class="line" style="width: 170rpx;" v-if="ix < endStatusList31.length - 1"
							:class="{'activeLine' : ix < 1,'stopLine': ix == 1,'stopLine3': ix == 2}"></text>
					</block>
				</view>
				<view class="new-step-bot display-flex">
					<block v-for="(it,ix) in endStatusList31" :key="ix">
						<text
							:class="{'pass' : ix < 3,'stop': ix == 2 || ix == 3}">
							<block >{{it}}</block>
						</text>
					</block>
				</view>
			</view>
			<view class="new-step-box" v-else-if=" orderInfo.status == 5 && orderInfo.is_acceptance == 1 && orderInfo.ss_status == 3">
				<view class="new-step-top display-flex">
					<block v-for="(it,ix) in endStatusList4" :key="ix">
						<view class="circle"
							:class="{'pass': ix < 3,'stop': ix == 4 || ix == 3}">
							<text></text>
						</view>
						<text class="line" style="width: 120rpx;" v-if="ix < endStatusList4.length - 1"
							:class="{'activeLine' : ix < 3,'stopLine': ix == 2,'stopLine3': ix == 3}"></text>
					</block>
				</view>
				<view class="new-step-bot display-flex">
					<block v-for="(it,ix) in endStatusList4" :key="ix">
						<text
							:class="{'pass' : ix < 3,'stop': ix == 3 || ix == 4}">
							<block >{{it}}</block>
						</text>
					</block>
				</view>
			</view>
			<view class="new-step-box" v-else-if="orderInfo.res_status == 1 && orderInfo.status == 2">
				<view class="new-step-top display-flex">
					<view class="circle" :class="{'pass' : orderInfo.status > -1,'stop': stopStatus == -1}">
						<text></text>
					</view>
					<text class="line" style="width: 260rpx;"
						:class="{'activeLine' : orderInfo.status > -1,'stopLine': stopStatus == 0}"></text>
					<view class="circle" :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">
						<text></text>
					</view>
					<text class="line stopLine2" style="width: 260rpx;"
						:class="{'activeLine' : orderInfo.status > 0}"></text>
					<view class="circle stop">
						<text></text>
					</view>
				</view>
				<view class="new-step-bot display-flex">
					<text :class="{'pass' : orderInfo.status > -1,'stop': stopStatus == -1}">已下单</text>
					<text :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">待接单</text>
					<text class="stop">
						申诉中
					</text>
				</view>
			</view>
			<view class="new-step-box" v-else-if="orderInfo.res_status == 1 && orderInfo.status == 3">
				<view class="new-step-top display-flex">
					<view class="circle" :class="{'pass' : orderInfo.status > -1,'stop': stopStatus == -1}">
						<text></text>
					</view>
					<text class="line" style="width: 170rpx;"
						:class="{'activeLine' : orderInfo.status > -1,'stopLine': stopStatus == 0}"></text>
					<view class="circle" :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">
						<text></text>
					</view>
					<text class="line" style="width: 170rpx;"
						:class="{'activeLine' : orderInfo.status > -1,'stopLine': stopStatus == 0}"></text>
					<view class="circle" :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">
						<text></text>
					</view>
					<text class="line stopLine2" style="width: 170rpx;"
						:class="{'activeLine' : orderInfo.status > 0}"></text>
					<view class="circle stop">
						<text></text>
					</view>
				</view>
				<view class="new-step-bot display-flex">
					<text :class="{'pass' : orderInfo.status > -1,'stop': stopStatus == -1}">已下单</text>
					<text :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">待接单</text>
					<text :class="{'pass' : orderInfo.status > 1,'stop': stopStatus == 0}">进行中</text>
					<text class="stop">
						申诉中
					</text>
				</view>
			</view>
			
			
			<view class="new-step-box" v-else-if=" orderInfo.ref_status_fb == 2 && orderInfo.status == 3">
				<view class="new-step-top display-flex">
					<block v-for="(it,ix) in endStatusList" :key="ix">
						<view class="circle"
							:class="{'pass': ix < 3,'stop': ix == 3 || ix == 4}">
							<text></text>
						</view>
						<text class="line" style="width: 120rpx;" v-if="ix < endStatusList.length - 1"
							:class="{'activeLine' : ix < 2,'stopLine': ix == 2,'stopLine3': ix == 3}"></text>
					</block>
				</view>
				<view class="new-step-bot display-flex">
					<block v-for="(it,ix) in endStatusList" :key="ix">
						<text
							:class="{'pass' : ix < 3,'stop': ix == 3 || ix == 4}">
							<block v-if="orderInfo.status == 3 && ix == 3">退款中</block>
							<block v-else-if="ix == 4">已退款</block>
							<block v-else>{{it}}</block>
						</text>
					</block>
				</view>
			</view>
			<view class="new-step-box" v-else-if=" orderInfo.ref_status_fb == 2 && orderInfo.status == 2">
				<view class="new-step-top display-flex">
					<block v-for="(it,ix) in endStatusList2" :key="ix">
						<view class="circle"
							:class="{'pass': ix < 3,'stop': ix == 2 || ix == 3}">
							<text></text>
						</view>
						<text class="line" style="width: 170rpx;" v-if="ix < endStatusList2.length - 1"
							:class="{'activeLine' : ix < 1,'stopLine': ix == 1,'stopLine3': ix == 2}"></text>
					</block>
				</view>
				<view class="new-step-bot display-flex">
					<block v-for="(it,ix) in endStatusList2" :key="ix">
						<text
							:class="{'pass' : ix < 3,'stop': ix == 2 || ix == 3}">
							<block >{{it}}</block>
						</text>
					</block>
				</view>
			</view>
			
			<view class="new-step-box" v-else-if="orderInfo.ref_status && orderInfo.status == 2 && orderInfo.is_tk == 0">
				<view class="new-step-top display-flex">
					<view class="circle" :class="{'pass' : orderInfo.status > -1,'stop': stopStatus == -1}">
						<text></text>
					</view>
					<text class="line" style="width: 260rpx;"
						:class="{'activeLine' : orderInfo.status > -1,'stopLine': stopStatus == 0}"></text>
					<view class="circle" :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">
						<text></text>
					</view>
					<text class="line stopLine2" style="width: 260rpx;"
						:class="{'activeLine' : orderInfo.status > 0}"></text>
					<view class="circle stop">
						<text></text>
					</view>
				</view>
				<view class="new-step-bot display-flex">
					<text :class="{'pass' : orderInfo.status > -1,'stop': stopStatus == -1}">已下单</text>
					<text :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">待接单</text>
					<text class="stop">
						退款中
					</text>
				</view>
			</view>
			<view class="new-step-box" v-else-if="orderInfo.ref_status && orderInfo.status == 3 && orderInfo.is_tk == 0">
				<view class="new-step-top display-flex">
					<view class="circle" :class="{'pass' : orderInfo.status > -1,'stop': stopStatus == -1}">
						<text></text>
					</view>
					<text class="line" style="width: 170rpx;"
						:class="{'activeLine' : orderInfo.status > -1,'stopLine': stopStatus == 0}"></text>
					<view class="circle" :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">
						<text></text>
					</view>
					<text class="line" style="width: 170rpx;"
						:class="{'activeLine' : orderInfo.status > -1,'stopLine': stopStatus == 0}"></text>
					<view class="circle" :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">
						<text></text>
					</view>
					<text class="line stopLine2" style="width: 170rpx;"
						:class="{'activeLine' : orderInfo.status > 0}"></text>
					<view class="circle stop">
						<text></text>
					</view>
				</view>
				<view class="new-step-bot display-flex">
					<text :class="{'pass' : orderInfo.status > -1,'stop': stopStatus == -1}">已下单</text>
					<text :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">待接单</text>
					<text :class="{'pass' : orderInfo.status > 1,'stop': stopStatus == 0}">进行中</text>
					<text class="stop">
						退款中
					</text>
				</view>
			</view>
			
			
			<view class="new-step-box" v-else-if=" orderInfo.status !=5">
				<view class="new-step-top display-flex">
					<block v-for="(it,ix) in statusList" :key="ix">
						<view class="circle"
							:class="{'pass' : orderInfo.status > ix -1,'stop': (orderInfo.res_status && orderInfo.status == ix) || (orderInfo.ref_status && orderInfo.status == ix  && orderInfo.is_tk == 0)}">
							<text></text>
						</view>
						<text class="line" v-if="ix < statusList.length - 1"
							:class="{'activeLine' : orderInfo.status > ix,'stopLine': (orderInfo.res_status && orderInfo.status == ix + 1) || (orderInfo.ref_status && orderInfo.status == ix + 1 && orderInfo.is_tk == 0)}"></text>
					</block>
				</view>
				<view class="new-step-bot display-flex">
					<block v-for="(it,ix) in statusList" :key="ix">
						<text
							:class="{'pass' : orderInfo.status > ix - 1,'stop': (orderInfo.res_status && orderInfo.status == ix) || (orderInfo.ref_status && orderInfo.status == ix  && orderInfo.is_tk == 0)}">
							<block v-if="orderInfo.res_status && orderInfo.status == ix">申诉中</block>
							<block v-else-if="orderInfo.ref_status && orderInfo.status == ix && orderInfo.is_tk == 0">退款中</block>
							<block v-else-if="orderInfo.ref_status_fb == 2 && ix == 4">已退款</block>
							<block v-else-if="ix == 3 && orderInfo.is_gai == 1">修改中</block>
							<block v-else>{{it}}</block>
						</text>
					</block>
				</view>
			</view>
			<view class="new-step-box" v-else>
				<view class="new-step-top display-flex">
					<view class="circle" :class="{'pass' : orderInfo.status > -1,'stop': stopStatus == -1}">
						<text></text>
					</view>
					<text class="line" style="width: 260rpx;"
						:class="{'activeLine' : orderInfo.status > -1,'stopLine': stopStatus == 0}"></text>
					<view class="circle" :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">
						<text></text>
					</view>
					<text class="line stopLine2" style="width: 260rpx;"
						:class="{'activeLine' : orderInfo.status > 0}"></text>
					<view class="circle stop">
						<text></text>
					</view>
				</view>
				<view class="new-step-bot display-flex">
					<text :class="{'pass' : orderInfo.status > -1,'stop': stopStatus == -1}">已下单</text>
					<text :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">待接单</text>
					<text class="stop">
						{{orderInfo.qx_type == 2 ? '已拒绝' : '已取消'}}
					</text>
				</view>
			</view>
		</view>

		<view class="danbox">
			<view class="dantop">
				<!-- 写手 -->
				<block v-if="orderInfo.writer_uid != $db.get('userInfo').membe_id">
					<image :src="orderInfo.writer.pic | formatImgUrl" class="head" mode="" @tap="$go('/pages/my/my?id='+orderInfo.writer.membe_id)"></image>
					<view class="dantitle">
						{{orderInfo.writer.username}}
					</view>
					
						<image
							:src="$options.filters.formatImgUrl(orderInfo.writer.writer_level.is_active?orderInfo.writer.writer_level.level.image:orderInfo.writer.writer_level.level.hide_img)"
							@click="$go('/pages/user/grade?uid='+orderInfo.writer.membe_id)" class="danpic" mode=""
							v-if="orderInfo.writer&&orderInfo.writer.is_writer">
						</image>
										
									
						<!-- <image v-if="orderInfo.writer&&orderInfo.writer.user_level.is_active"
								
								:src="!orderInfo.writer.user_level.level?'':($options.filters.formatImgUrl(orderInfo.writer.user_level.active_day>0?orderInfo.writer.user_level.level.image:orderInfo.writer.user_level.level.hide_img))"
								class="danji" mode="" >
								
							</image> -->
				</block>
				<!-- 用户 -->
				<block v-else>
					<image :src="orderInfo.user.pic | formatImgUrl" class="head" mode="" @tap="$go('/pages/my/my?id='+orderInfo.user.membe_id)"></image>
					<view class="dantitle">
						{{orderInfo.user.username}}
					</view>			
									
						<image v-if="orderInfo.user&&orderInfo.user.user_level.is_active"
								
								:src="!orderInfo.user.user_level.level?'':($options.filters.formatImgUrl(orderInfo.user.user_level.active_day>0?orderInfo.user.user_level.level.image:orderInfo.user.user_level.level.hide_img))"
								class="danji" mode="" >
								
							</image>
				</block>
					
				<view  @click="toImRoom()" class="gt">
					去沟通
				</view>

			</view>
			<view class="jcbox">
				<image :src="'/images/je.png' | formatImgUrl" class="jcpic" mode=""></image>
				<view class="jctxt">
					{{orderInfo.c_title}}
				</view>
			</view>
			<view class="dtxt">
			{{orderInfo.c_desc}}<text>| 共{{orderInfo.num}}单 | 共{{orderInfo.num}}{{orderInfo.c_word_count}}
			</text>
			</view>
			<view class="gong">
				共计支付
				<text>{{Number(orderInfo.price).toFixed(0)}}</text>
				币
			</view>
			<!-- <view class="zhibox">
				<view class="zhitxt">
					制作天数
				</view>
				<view class="daytxt">
					{{orderInfo.day}}天
				</view>
			</view> -->
			<view class="zhibox">
				<view class="zhitxt">
					截稿时间
				</view>
				<view class="daytxt">
					{{orderInfo.end_time || ''}}
				</view>
			</view>
			<view class="zhibox">
				<view class="zhitxt">
					下单数量
				</view>
				<view class="daytxt">
					{{orderInfo.num}}单
				</view>
			</view>
			<view class="zhibox">
				<view class="zhitxt">
					稿件要求
				</view>
				<view class="daytxt hui beizhu">
					{{orderInfo.notes?orderInfo.notes:'暂无'}}
				</view>
			</view>
			<view class="zhibox">
				<view class="zhitxt">
					优惠券
				</view>
				<view class="daytxt red" v-if="orderInfo.cv_price>0">
					-{{orderInfo.cv_price}}<text>币</text>
				</view>
				<view class="daytxt hui" v-else>
					暂无
				</view>
			</view>
			<view class="jiatxt">
				实付款：<text>{{orderInfo.cv_price?(orderInfo.price-orderInfo.cv_price):orderInfo.price}}</text>币
			</view>
		</view>
		
		<view class="current-comment" v-if="orderInfo.order_eval && orderInfo.order_eval.create_time" @tap="$go('/showcase/showcase/evaluateinfo?id='+orderInfo.id)">
			<view class="current-line display-flex">
				<image :src="orderInfo.user&&orderInfo.user.pic | formatImgUrl" class="avatar" mode=""></image>
		
				<view class="" style="width: calc(100% - 100rpx);">
					<view class="display-flex">
						<view class="name">
							{{orderInfo.user&&orderInfo.user.username}}
						</view>
						<view class="good red" v-if="orderInfo.order_eval.rank <= 1">
							差评
						</view>
						<view class="good yellow" v-else-if="orderInfo.order_eval.rank <= 3">
							中评
						</view>
						<view class="good" v-else>
							很满意
						</view>
					</view>
		
					<view class="time">
						<view class="starbox_wrap">
							<text class="tit">效率</text>
							<image :src="'/images/newstar.png' | formatImgUrl" class="spic"
								v-for="rank in orderInfo.order_eval.rank" mode="aspectFit">
							</image>
							<image :src="'/images/graystar.png' | formatImgUrl" class="spic"
								v-for="rank in 5-orderInfo.order_eval.rank" mode="aspectFit">
							</image>
						</view>
						<view class="starbox_wrap">
							<text class="tit">内容</text>
							<image :src="'/images/newstar.png' | formatImgUrl" class="spic"
								v-for="rank in orderInfo.order_eval.rank" mode="aspectFit">
							</image>
							<image :src="'/images/graystar.png' | formatImgUrl" class="spic"
								v-for="rank in 5-orderInfo.order_eval.rank" mode="aspectFit">
							</image>
						</view>
						<view class="starbox_wrap" style="margin-right: 0;">
							<text class="tit">文笔</text>
							<image :src="'/images/newstar.png' | formatImgUrl" class="spic"
								v-for="rank in orderInfo.order_eval.rank" mode="aspectFit">
							</image>
							<image :src="'/images/graystar.png' | formatImgUrl" class="spic"
								v-for="rank in 5-orderInfo.order_eval.rank" mode="aspectFit">
							</image>
						</view>
					</view>
				</view>
			</view>
		
			<view class="current-line2">
				{{orderInfo.order_eval && orderInfo.order_eval.eval_row || '这位单主什么都没有留下'}} 
			</view>
			<view class="current-line3 display-flex just-between">
				<text>{{ $options.filters.parseTime(orderInfo.order_eval.create_time,'{y} 年 {m} 月 {d} 日 {h}:{i}')}} 发布评价</text>
				<image :src="'/images/bao.png'  | formatImgUrl" mode="" @tap.stop="showComment=true"></image>
			</view>
		</view>
		
		<view class="order-box" v-if="orderInfo.is_acceptance == 1 && (orderInfo.status == 4 || orderInfo.status == 5)">
			<view class="display-flex just-between">
				<view class="part">
					申诉处理
				</view>
				<view class="tui-btn" @tap="showShenSu=true">
					{{(orderInfo.res_w && orderInfo.res_w.status == '待处理' && orderInfo.writer_uid == $db.get('userInfo').membe_id) || (orderInfo.res_u && orderInfo.res_u.status == '待处理' && orderInfo.writer_uid != $db.get('userInfo').membe_id) ? '您' : "对方"}}的申诉已受理，请查看申诉结果
				</view>
			</view>
		</view>
		
		<view class="order-box" v-else-if="orderInfo.is_acceptance == 1">
			<view class="display-flex just-between">
				<view class="part">
					申诉处理
				</view>
				<view class="tui-btn" >
					{{(orderInfo.res_w && orderInfo.res_w.status == '待处理' && orderInfo.writer_uid == $db.get('userInfo').membe_id) || (orderInfo.res_u && orderInfo.res_u.status == '待处理' && orderInfo.writer_uid != $db.get('userInfo').membe_id) ? '您' : "对方"}}的申诉已受理，请等待申诉结果
				</view>
			</view>
		</view>
		
		<view class="order-box" v-if="orderInfo.ref_num > 0 && orderInfo.ref_status_fb == 2">
			<view class="display-flex just-between">
				<view class="part">
					退款记录
				</view>
				<view class="tui-btn" @tap="$go('/showcase/showcase/tuiList?oid=' + id)">
					该订单退款记录，点击查看
				</view>
			</view>
		</view>
		<view class="order-box" v-else-if="(orderInfo.ref_num > 0 && orderInfo.ref_status_fb != 2) || orderInfo.ref_u">
			<view class="display-flex just-between">
				<view class="part">
					部分退款
				</view>
				<view class="tui-btn" @tap="$go('/showcase/showcase/tuiList?oid=' + id)">
					该订单含部分退款，点击查看
				</view>
			</view>
		</view>
		
		<view class="order-box" v-if="orderInfo.is_gai == 1">
			<view class="display-flex just-between">
				<view class="part">
					修改意见
				</view>
				<view class="tui-btn" @tap="$go('/showcase/showcase/editReason?oid=' + id)">
					<block v-if="orderInfo.writer_uid != $db.get('userInfo').membe_id">
						您已提交修改意见，点击查看
					</block>
					<block v-else @tap="$go('/showcase/showcase/editReason?oid=' + id)">
						用户已提交修改意见，点击查看
					</block>
				</view>
			</view>
		</view>
		<!-- 10.16新增 -->
		<view class="guess-box "  v-if="orderInfo.status != 4">
			<view class="title display-flex just-between">
				<text>猜你想问</text>
				<text class="font" v-if="orderInfo.writer_uid != $db.get('userInfo').membe_id">点击问题即可快捷发送给写手</text>
				<text class="font" v-else>点击问题即可快捷发送给单主</text>
			</view>
			<view class="display-flex">
				<view class="guess-item" v-for="(it,ix) in guessList" :key="ix" @tap="sendMsg(it)">
					{{it.title}}
				</view>
			</view>
		
		</view>
		<view class="order-box">
			<block v-if="openDetail">
				<view class="order-item display-flex">
					<view class="txt">
						支付方式
					</view>
					<view class="qitxt">
						<block v-if="orderInfo.pay_type == 1">微信支付</block>
						<block v-if="orderInfo.pay_type == 2">粮币支付</block>
						<block v-if="orderInfo.pay_type == 3">微信app支付</block>
					</view>
				</view>
			</block>
		
			<view class="order-item display-flex">
				<view class="txt">
					下单时间
				</view>
				<view class="qitxt">
					{{$options.filters.parseTime(orderInfo.create_time,'{y} / {m} / {d} {h}:{i}:{s}') }}
				</view>
			</view>
		
			<block v-if="openDetail">
				<view class="order-item display-flex">
					<view class="txt">
						订单编号
					</view>
					<view class="qitxt">
						{{orderInfo.out_trade_no}}
					</view>
				</view>
				<view class="order-item display-flex">
					<view class="txt">
						经验转化
					</view>
					<view class="qitxt">
						{{orderInfo.cv_price?(parseInt(orderInfo.price-orderInfo.cv_price)):parseInt(orderInfo.price)}} 写手经验
					</view>
				</view>
				<view class="order-item display-flex">
					<view class="txt">
						客户信息
					</view>
					<view class="qitxt">
						{{orderInfo.user && orderInfo.user.username}} {{orderInfo.user && orderInfo.user.dream_id}}
					</view>
				</view>
			</block>
		
		
			<view class="openor display-flex" v-if="openDetail" @tap="openDetail=false">
				<text>收起</text>
				<image :src="'/images/closeicon.png' | formatImgUrl" mode="aspectFit"></image>
			</view>
			<view class="openor display-flex" v-else @tap="openDetail=true">
				<text>更多</text>
				<image :src="'/images/openicon.png' | formatImgUrl" mode="aspectFit"></image>
			</view>
		</view>
		
		<view class="xuzhi">
			接单须知:<br>
			
			1、未满16周岁的写手，请务必在监护人明示同意的前提下，进行相关交易。用户成功付款后，订单金额将由平台保管，订单完成后到账写手佣金。<br>
			2、接单前请确认约稿内容、截稿时间、版权归属等细节，确认无误后接单，以免发生纠纷。<br>
			3、请按时交稿，如超时未交稿，将影响写手信誉。<br>
			4、禁止枪手代写、AI代写，抄袭、洗稿、跑单。<br>
			5、如订单发生争议，可与用户沟通，积极解决问题。如沟通未果可到【我的】-【订单查询】选择该订单，在【更多操作】进行订单申诉。<br>
			6、为保护自身权益，请勿转单或脱离平台交易，此种情况下，双方权益均无法得到平台保障。同时一经发现，将永久封禁双方账号。<br>
			7、如用户引导脱离平台交易、恶意拒稿，或发现其他不合理、违法违规行为，请向平台申诉。<br>
			8、平台禁止购买、出售、代写学位论文或组织学位论文买卖等学术造假行为，一经确认，交易双方将可能承担相应责任。<br>
			9、请阅读并同意<text @click.stop="goToxie">《平台约文服务协议及指南》</text><text @click.stop="goToOtherxie(8)">《写手违规管理办法》</text>。
		</view>

		<block v-if="orderInfo.ref_status_fb != 2 && orderInfo.status != 5">
			<view class="dibox" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}" v-if="orderInfo.res_status ==1 && orderInfo.status == 4">
				<view class="zaibox">
					<view class="zaileft">
						<view class="dbox">
							<view class="zaititle">
								<text>订单完成</text>
							</view>
							<view class="text">
								<text>用户确认定稿</text>
							</view>
						</view>
						<view class="zaitxt">
							<text>订单完成，快去查看小金库吧</text>
						</view>
					</view>
					<view class="que" @click="submit()">
						<text>查看稿件</text>
					</view>
				</view>
			</view>
			<view class="dibox" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}" v-if="orderInfo.res_status ==1">
				<view class="zaibox">
					<view class="zaileft">
						<view class="dbox">
							<view class="zaititle">
								<text>平台申诉</text>
							</view>
							<view class="text">
								<text v-if="orderInfo.is_acceptance == 0">{{(orderInfo.res_w && orderInfo.res_w.status == '待处理' && orderInfo.writer_uid == $db.get('userInfo').membe_id) || (orderInfo.res_u && orderInfo.res_u.status == '待处理' && orderInfo.writer_uid != $db.get('userInfo').membe_id) ? '您' : "对方"}}已申请平台介入</text>
								<text v-else>平台已受理{{(orderInfo.res_w && orderInfo.res_w.status == '待处理' && orderInfo.writer_uid == $db.get('userInfo').membe_id) || (orderInfo.res_u && orderInfo.res_u.status == '待处理' && orderInfo.writer_uid != $db.get('userInfo').membe_id) ? '您' : "对方"}}的申诉</text>
							</view>
						</view>
						<view class="zaitxt">
							<text v-if="orderInfo.is_acceptance == 0">该申诉在平台受理之前，倒计时继续</text>
							<text v-else>倒计时暂停，平台将在七天内联系处理</text>
						</view>
					</view>
					<view :class="orderInfo.is_acceptance == 1 ? 'que2' : 'que'">
						<text v-if="orderInfo.is_acceptance == 0 && orderInfo.writer_uid == $db.get('userInfo').membe_id && orderInfo.res_w && orderInfo.res_w.status == '待处理'" @tap="closeReport">取消申诉</text>
						<text v-else-if="orderInfo.is_acceptance == 0 && orderInfo.writer_uid != $db.get('userInfo').membe_id && orderInfo.res_u && orderInfo.res_u.status == '待处理'" @tap="closeReport">取消申诉</text>
						<text v-else>等待结果</text>
					</view>
				</view>
			</view>
			<view class="dibox" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}"
				v-else-if="orderInfo.ref_status ==1 && orderInfo.is_tk == 0">
				<view class="zaibox">
					<view class="zaileft">
						<view class="dbox">
							<view class="zaititle">
								<text>申请退款</text>
							</view>
							<view class="text" v-if="orderInfo.ref_u.w_refs_sy_time">
								<!-- <text v-if="orderInfo.writer_uid == $db.get('userInfo').membe_id">请尽快处理</text>
								<text v-else>等待写手处理</text> -->
								
								<wly-countdown :day="getDateStr(orderInfo.ref_u.w_refs_sy_time,0)" :hour="getDateStr(orderInfo.ref_u.w_refs_sy_time,1)" :minute="getDateStr(orderInfo.ref_u.w_refs_sy_time,2)"
									:second="getDateStr(orderInfo.ref_u.w_refs_sy_time,3)" showType="slot">
									<template v-slot="{day, hour, minute, second}">
										<view class="display-flex" v-if="day||hour||minute||second">
											<view class="time_model" v-if="day">
												<view>
													{{day}}
												</view>
												<view>
													天
												</view>
											</view>
											<view class="time_model">
												<view>
													{{hour}}
												</view>
												<view>
													:
												</view>
											</view>
											<view class="time_model">
												<view>
													{{minute}}
												</view>
												<view>
													:
												</view>
											</view>
											<view class="time_model">
												<view>
													{{second}}
												</view>
											</view>
										</view>
									</template>
								</wly-countdown>
							</view>
						</view>
						<view class="zaitxt">
							<text >三天内未处理订单，平台将会介入处理</text>
						</view>
					</view>
					<view :class="orderInfo.writer_uid != $db.get('userInfo').membe_id || orderInfo.is_tk == 2 ? 'que2' : 'que'">
						<text v-if="orderInfo.writer_uid != $db.get('userInfo').membe_id && orderInfo.is_tk == 2" @tap="replyPop=true">查看结果</text>
						<text v-else-if="orderInfo.writer_uid == $db.get('userInfo').membe_id && orderInfo.ref_status == 1"  @tap="dealPop=true">处理订单</text>
						<text v-else>等待处理</text>
					</view>
				</view>
			</view>
			
			<view class="dibox" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}"
				v-else-if="orderInfo.status !== 4 && orderInfo.status !== 5 && orderInfo.status !== 0 && orderInfo.res_status !=1">
				<view class="zaibox">
					<view class="zaileft">
						<view class="dbox">
							<view class="zaititle">
								<text v-if="orderInfo.status == 1">确认接单</text>
								<text v-if="orderInfo.status == 2">正在制作</text>
								<text v-if="orderInfo.status == 3">等待定稿</text>
								
							</view>
							<view class="text">
								<text v-if="orderInfo.status == 1">接单后此订单生效</text>
								<text v-if="orderInfo.status == 2">等待上传作品</text>
								<text v-if="orderInfo.status == 3 && orderInfo.is_gai == 1">请按要求修改稿件</text>
								
								<block v-if="orderInfo.status == 3 && orderInfo.is_gai == 0">
									<wly-countdown :day="getDateStr(orderInfo.dg_time,0)" :hour="getDateStr(orderInfo.dg_time,1)" :minute="getDateStr(orderInfo.dg_time,2)"
										:second="getDateStr(orderInfo.dg_time,3)" showType="slot">
										<template v-slot="{day, hour, minute, second}">
											<view class="display-flex" v-if="day||hour||minute||second">
												<view class="time_model" v-if="day">
													<view>
														{{day}}
													</view>
													<view>
														天
													</view>
												</view>
												<view class="time_model">
													<view>
														{{hour}}
													</view>
													<view>
														:
													</view>
												</view>
												<view class="time_model">
													<view>
														{{minute}}
													</view>
													<view>
														:
													</view>
												</view>
												<view class="time_model">
													<view>
														{{second}}
													</view>
												</view>
											</view>
										</template>
									</wly-countdown>
								</block>
							</view>
						</view>
						<view class="zaitxt">
						<!-- 	<text v-if="orderInfo.status == 1">三天内未确认此订单将自动取消</text>
							<text v-if="orderInfo.status == 2">已用其他方式交稿请进入页面选择上传完成</text>
							<text v-if="orderInfo.status == 3">已经使用的优惠部分不支持调整</text> -->
							
								<text v-if="orderInfo.status == 1">请仔细确认订单信息后选择是否接单</text>
								<text v-if="orderInfo.status == 2">如未在单主截稿时间内交稿，平台将会重点关注</text>
								
								<text v-if="orderInfo.status == 3 && orderInfo.is_gai == 0">等待用户定稿或提交修改，请关注订单信息</text>
								<text v-if="orderInfo.status == 3 && orderInfo.is_gai == 1">已收到修稿意见，请修改稿件</text>
						</view>
					</view>
					<view class="que" @click="submit()">
						<text v-if="orderInfo.status == 1">确认接单</text>
						<text v-if="orderInfo.status == 2">上传稿件</text>
						<text v-if="orderInfo.status == 3">查看稿件</text>
					</view>
				</view>
			</view>
			
			
			
				<view class="dibox" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}"
					v-else-if="orderInfo.status == 4 && orderInfo.res_status !=1 ">
					<view class="zaibox">
						<view class="zaileft">
							<view class="dbox">
								<view class="zaititle">
									<text>订单完成</text>
								</view>
								<view class="text">
									<text >用户确认定稿</text>
								</view>
							</view>
							<view class="zaitxt">
								<text >订单完成，快去查看小金库吧</text>
							</view>
						</view>
						<view class="que" @click="submit()">
							<text >查看稿件</text>
						</view>
					</view>
				</view>
		</block>
		
			
		<!-- 取消订单 -->
		<u-popup mode="center" :show="show" @close="close">
			<view class="mask">
				<view class="matitle">
					
					<text v-if="orderInfo.writer_uid == $db.get('userInfo').membe_id">确定拒绝订单吗？</text>
					<text v-else >是否确定取消该订单</text>
				</view>
				<view class="matxt">
					{{orderInfo.writer_uid == $db.get('userInfo').membe_id ? "此操作不可更改" : "确认后钱款将退款至粮币余额"}} 
				</view>
				<view class="quque">
					<view class="quli" @click="show = false">
						取消
					</view>
					<view class="quli quactive" @click="goToindex">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 更多操作弹窗 -->
		<u-popup :show="showPop">
			<view class="mask2">
				<!-- 写手 -->
				<block v-if="orderInfo.writer_uid == $db.get('userInfo').membe_id && orderInfo.res_w">
					<view class="matop" @tap="closeReport"
						v-if="orderInfo.res_status == 1">
						<view class="matxt">
							取消申诉
						</view>
						<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
					</view>
				</block>
				<block v-if="orderInfo.writer_uid == $db.get('userInfo').membe_id && (!orderInfo.res_w || orderInfo.res_w.status == '已取消') && orderInfo.status > 1">
					<view class="matop" @click="$go('/pages/find/reportEva?id='+orderInfo.id+'&newtype=6')">
						<view class="matxt">
							申诉订单
						</view>
						<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
					</view>
				</block>
				<!-- 用户 -->
				<block v-if="orderInfo.writer_uid != $db.get('userInfo').membe_id && orderInfo.res_u">
					<view class="matop" @tap="closeReport"
						v-if="orderInfo.res_status == 1">
						<view class="matxt">
							取消申诉
						</view>
						<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
					</view>
				</block>
				<block v-if="orderInfo.writer_uid != $db.get('userInfo').membe_id && (!orderInfo.res_u || orderInfo.res_u.status == '已取消') && orderInfo.status > 1">
					<view class="matop" @click="$go('/pages/find/reportEva?id='+orderInfo.id+'&newtype=6')" >
						<view class="matxt">
							申诉订单
						</view>
						<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
					</view>
				</block>
				
				<view class="matop"  style="margin-top: -20rpx;"  @tap="$go('/showcase/showcase/editReason?oid=' + id)" v-if="orderInfo.uid !== $db.get('userInfo').membe_id && orderInfo.is_gai == 1">
					<view class="matxt">
						查看意见
					</view>
					<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="matop" style="margin-top: -20rpx;" @tap="$go('/showcase/showcase/editReason?oid=' + id)" v-if="orderInfo.uid == $db.get('userInfo').membe_id && orderInfo.is_gai == 1">
					<view class="matxt">
						查看意见
					</view>
					<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="qubox" style="margin-top: 20rpx;" @click="showPop = false">
					取消
				</view>
			</view>
		</u-popup>
		
		<view v-if="dealPop || refusePop" @click="dealPop=false,refusePop=false" class="zhezhao">
		</view>
		<!-- 写手 处理退款弹窗 -->
		<view v-if="dealPop" class="zong">
			<view class="biaoqian">
				<view class="top">
					<image :src="orderInfo.user.pic | formatImgUrl" mode="aspectFill"></image>
					<view>用户申请退款请尽快处理</view>
					<view class="font_red">三天内未处理将自动同意</view>
				</view>
				<view class="display-flex info_line">
					<text class="info_line_left">订单编号：</text>
					<text>{{orderInfo.out_trade_no}}</text>
				</view>
				<view class="display-flex info_line">
					<text class="info_line_left">退款原因：</text>
					<text>{{orderInfo.ref_u&&orderInfo.ref_u.refs_money_cont}}</text>
				</view>
				<view class="display-flex info_line">
					<text class="info_line_left">退款金额：</text>
					<text>{{orderInfo.ref_u&&orderInfo.ref_u.price ? Number(orderInfo.ref_u.price).toFixed(0) : '0'}}</text>
				</view>
				<view class="display-flex info_line" v-if="orderInfo.ref_u&&orderInfo.ref_u.refs_money_imgs.length">
					<text class="info_line_left">凭证图片：</text>
				</view>
				<view class="not_like" style="margin-top: 0rpx;padding: 0;box-sizing: border-box;background-color: #fff;" v-if="orderInfo.ref_u&&orderInfo.ref_u.refs_money_imgs.length">
		
					<view class="imgView" style="padding: 0;">
						<view v-for="(img,index) in orderInfo.ref_u.refs_money_imgs" class="imgList" style="margin-right: 20rpx;">
							<image :src="img | formatImgUrl" mode="aspectFill" style="width: 110rpx;height: 110rpx;">
							</image>
						</view>
					</view>
				</view>
		
				<view class="cont_t" style="float: left;">
					<view class="t1" @tap="dealApply(0)">
						<view class="tex">
							同意退款
						</view>
					</view>
				</view>
				<view class="cont_t cont_t_refuse" @tap="dealPop=false,refusePop=true" style="float: left;">
					<view class="t1">
						<view class="tex">
							拒绝退款
						</view>
					</view>
				</view>
		
				<image class="cl1" @click="dealPop=false" :src="'/images/cl1.png' | formatImgUrl" mode=""></image>
			</view>
		</view>
		
		<!-- 写手 拒绝退款弹窗 -->
		<view class="zong" v-if="refusePop">
			<view class="biaoqian">
				<view class="top">
					<image :src="orderInfo.user.pic | formatImgUrl" mode="aspectFill"></image>
					<view>拒绝用户的退款申请</view>
					<view>请填写拒绝说明</view>
				</view>
				<view class="reason_box display-flex just-between">
					<text>拒绝理由</text>
					<!-- <view class="display-flex">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="centxt" :class="index == 0 ? 'font-gray' : ''">{{array[index]}}</view>
						</picker>
						<image :src="'/images/rar.png' | formatImgUrl" class="rarr" mode=""></image>
					</view> -->
					<input type="text" placeholder="请输入" v-model="form.w_refs_money_cont" style="text-align: right;font-size: 24rpx;">
				</view>
				<view class="tab">
					<textarea placeholder-class="c1" placeholder="可填写任意内容供用户查看..." v-model="form.w_refs_money_desc"></textarea>
				</view>
				<view class="not_like">
					<view class="tp">如有附件图片，请上传（选填）</view>
					
					<view class="imgView">
						<!-- <view v-for="(img,index) in form.w_refs_money_imgs" class="imgList">
							<image :src="img | formatImgUrl" mode="aspectFill" style="width: 105rpx;height: 105rpx;">
							</image>
							<view class="imgClose" @click="deletePic(index)">×</view>
						</view>
						<image :src="'/images/up.png' | formatImgUrl" mode="widthFix"
							style="width: 110rpx;height: 110rpx;" @click="onChooseImg"
							v-if="form.w_refs_money_imgs.length < 4"></image> -->
							
						<u-upload ref="uUpload" :uploadIcon="'/images/up.png' | formatImgUrl" :multiple="true" maxCount="4" width="78" height="78" :action="uploadImgUrl" :fileList="form.w_refs_money_imgs" @afterRead='afterRead' @delete="deletePic">
						</u-upload>
					</view>
				</view>
					
				<view class="cont_t" style="float: left;">
					<view class="t1" @tap="dealApply(1)">
						<view class="tex">
							拒绝退款
						</view>
					</view>
				</view>
					
				<image class="cl1" @click="refusePop=false" :src="'/images/cl1.png' | formatImgUrl" mode=""></image>
			</view>
		</view>
		
		<!-- 用户 退款申请被拒绝 -->
		<u-popup :show="replyPop" mode="center">
			<view class="biaoqian">
				<view class="top">
					<image :src="orderInfo.writer.pic | formatImgUrl" mode="aspectFill"></image>
					<view>您的退款申请被写手拒绝</view>
					<view>拒绝说明</view>
				</view>
				<view class="tab">
					<view class="textarea">
						{{orderInfo.ref_u&&orderInfo.ref_u.refs_money_cont || '什么也没有说~'}}
					</view>
				</view>
				<view class="not_like" v-if="orderInfo.ref_u&&orderInfo.ref_u.w_refs_money_imgs">
					<view class="tp">写手上传了附件图片</view>
		
					<view class="imgView">
						<view v-for="(img,index) in orderInfo.ref_u.w_refs_money_imgs" class="imgList">
							<image :src="img | formatImgUrl" mode="aspectFill" style="width: 105rpx;height: 105rpx;" @click.stop="$common.previewImage(img,orderInfo.ref_u&&orderInfo.ref_u.w_refs_money_imgs)">
							</image>
						</view>
					</view>
		
				</view>
		
				<!-- <view class="cont_t" @tap="$go('/showcase/showcase/reback?oid=' + orderInfo.id + '&amount=' + orderInfo.price + '&orderNum=' + (orderInfo.num-orderInfo.ref_num))" style="float: left;">
					<view class="t1">
						<view class="tex">
							再次编辑
						</view>
					</view>
				</view> -->
				<view class="cont_t" @click="replyPop=false" style="float: left;">
					<view class="t1">
						<view class="tex">
							点击确认
						</view>
					</view>
				</view>
				<view class="cont_t cont_t_refuse" @tap="$go('/pages/find/reportEva?id='+orderInfo.id+'&newtype=6')" style="float: left;">
					<view class="t1">
						<view class="tex">
							订单申诉
						</view>
					</view>
				</view>
		
				<image class="cl1" @click="replyPop=false" :src="'/images/cl1.png' | formatImgUrl" mode=""
					style="left: 50%;transform: translateX(-50%);"></image>
			</view>
		</u-popup>
	
		<!-- 修改意见提示框 -->
		<u-popup mode="center" :show="showSuggest">
			<view class="mask">
				<view class="matitle">
					用户已提交修改意见
				</view>
				<view class="matxt">
					请在规定时间内完成稿件修改
				</view>
				<view class="quque">
					<view class="quli" @click="showSuggest = false">
						取消
					</view>
					<view class="quli quactive" @click="$go('/showcase/showcase/editReason')">
						查看
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 评论申诉 -->
		<u-popup :show="showComment" >
			<view class="mask2" >
				<view class="matop" @click="$go('/pages/find/reportEva?id='+orderInfo.id+'&newtype=0')">
					<view class="matxt">
						申诉
					</view>
					<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="qubox" @click="showComment = false">
					取消
				</view>
			</view>
		</u-popup>
	
		<u-popup :show="showShenSu" mode="center" @close="showShenSu=false">
			<view class="shen-box">
				<view class="shen-title">
					{{(orderInfo.res_w && orderInfo.res_w.status == '待处理' && orderInfo.writer_uid == $db.get('userInfo').membe_id) || (orderInfo.res_u && orderInfo.res_u.status == '待处理' && orderInfo.writer_uid != $db.get('userInfo').membe_id) ? '您' : "对方"}}的申诉已通过，平台将介入处理
				</view>
				<view class="shen-cont">
					<text class="label">处理结果：</text>
					<text class="val">
						<block v-if="orderInfo.status == 5">订单结束，订单金额将退还</block>
						<block v-if="orderInfo.status == 4">订单完成</block>
					</text>
				</view>
				<view class="shen-cont">
					<text class="label">申请时间：</text>
					<text class="val">
						<block v-if="orderInfo.res_w && orderInfo.res_w.status == '待处理' && orderInfo.writer_uid == $db.get('userInfo').membe_id">{{orderInfo.res_w.create_time}}</block>
						<block v-if="orderInfo.res_u && orderInfo.res_u.status == '待处理' && orderInfo.writer_uid != $db.get('userInfo').membe_id">{{orderInfo.res_u.create_time}}</block>
					</text>
				</view>
				<view class="shen-cont">
					<text class="label">处理时间：</text>
					<text class="val">{{orderInfo.update_time_str}}</text>
				</view>
			</view>
			<image class="cl1" @click="showShenSu=false" :src="'/images/cl1.png' | formatImgUrl" mode=""
				style="left: 50%;transform: translateX(-50%);"></image>
		</u-popup>
	</view>
</template>

<script>
	import * as db from '@/common/db.js'
	import {
	  TUIConversationService,
	  TUIChatService
	} from "@tencentcloud/chat-uikit-engine";
	import { sendMessages, sendTyping } from "@/TUIKit/components/TUIChat/utils/sendMessage";
	export default {
		data() {
			return {
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				show: false,
				orderInfo: {},
				userInfo: {},
				statusList: ['已支付','待接单','进行中','定稿中','已完成'],
				endStatusList: ['已支付','待接单','进行中','退款中','已退款'],
				endStatusList2: ['已支付','待接单','退款中','已退款'],
				endStatusList3: ['已支付','待接单','申诉中','已取消'],
				endStatusList31: ['已支付','待接单','申诉中','已完成'],
				endStatusList4: ['已支付','待接单','进行中','申诉中','已取消'],
				stopStatus: -10,
				guessList: [],
				openDetail: false,
				dealPop: false, //写手处理退款申请
				form: {
					img: [],
					cont: "",
					id: "",
					w_refs_money_imgs: [],
					w_refs_money_cont: '',
					w_refs_money_desc: ''
				},
				refusePop: false, //写手 拒绝退款
				replyPop: false, // 拒绝退款回复
				array: ['请选择', '理由1', '理由2'],
				index: 0,
				openDetail: false,
				showPop: false,
				showSuggest: false,
				showComment: false,
				id: '',
				fileList2: [],
				isClick: true,
				showShenSu: false
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.getOrderInfo(e.id)
			} else {
				this.$common.errorToShow('参数异常')
			}
			
			
		},
		onShow() {
			if(this.id){
				this.getOrderInfo(this.id)
			}
			this.showPop = false
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
			var url = getCurrentPages()
			this.urlPath = '/' + url[0].route

		},
		methods: {
			getDateStr(mss, type) {
				var days = parseInt(mss / 86400);
				var hours = parseInt((mss - (days * 86400)) / 3600);
				var minutes = parseInt((mss - (days * 86400) - (hours * 3600)) / 60);
				var seconds = mss - (days * 86400) - (hours * 3600) - (minutes * 60)
			
				if (type == 0) {
					return days;
				}
				if (type == 1) {
					return hours;
				}
				if (type == 2) {
					return minutes;
				}
				if (type == 3) {
					return seconds;
				}
			
			},
			// 取消申诉
			closeReport(){
				this.$api.default.request('order/qxSsOrder', {
					oid: this.orderInfo.id
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							this.showPop = false
							this.getOrderInfo(this.orderInfo.id)
						})
					}
				})
			},
			// 退款申请 0同意 1拒绝
			dealApply(type){
				if(type == 1){
					if(!this.form.w_refs_money_cont){
						this.$common.errorToShow('请填写拒绝理由')
						return
					}
				}
				
				this.$api.default.request('order/refOrderCl', {
					oid: this.orderInfo.id,
					type: type,
					w_refs_money_cont: this.form.w_refs_money_cont,
					w_refs_money_imgs: this.fileList2,
					w_refs_money_desc: this.form.w_refs_money_desc,
				}, 'POST', false).then((res) => {
					if (res.code) {
						if(uni.getStorageSync('isShow')){
							uni.removeStorageSync('isShow')
						}
						
						this.$common.successToShow(res.msg, () => {
							this.dealPop = false
							this.refusePop = false
							this.getOrderInfo()
						})
					}
				})
			},
			// 猜你想问 发送消息
			async sendMsg(item) {
				// this.$api.default.request('user/caini', {
				// 	id: item.id,
				// 	puid: this.$db.get('userInfo').membe_id == this.orderInfo.writer_uid ?  this.orderInfo.uid : this.orderInfo.writer_uid
				// }, 'POST', false).then((res) => {
				// 	if (res.code) {
				// 		this.$common.successToShow(res.msg, () => {
				// 			this.toImRoom()
				// 		})
				// 	}
				// })
				
				if(!this.isClick){
					
					return
				}
				this.isClick = false
				let membe_id= this.$db.get('userInfo').membe_id == this.orderInfo.writer_uid ?  this.orderInfo.uid : this.orderInfo.writer_uid
				uni.request({
				    url: 'https://api.dreamyuewen.com/api/user/userInfo', 
				    data: {
				       uid: membe_id,
				    },
				    header: {
				        token: db.get('auth')
				    },
				    success: (res) => {
				        uni.setStorageSync("userItem",res.data.user);
						
						uni.request({
						    url: 'https://api.dreamyuewen.com/api/user/userPageList', 
						    data: {
						       uid: membe_id,
							   page: 1,
							   type: 1
						    },
						    header: {
						        token: db.get('auth')
						    },
						    success: (ress) => {
						        uni.setStorageSync("userPageList",ress.data.data.data);
								
								uni.request({
								    url: 'https://api.dreamyuewen.com/api/order/getTimOrderList', 
								    data: {
								       uid: membe_id,
								    },
								    header: {
								        token: db.get('auth')
								    },
								    success: (resss) => {
										setTimeout(()=> {
											this.isClick = true
										}, 2000);
										
								        uni.setStorageSync("orderList",resss.data.data);
										
										TUIConversationService.switchConversation('C2C'+membe_id);
										
										let promise = TUIChatService.sendTextMessage({
										 payload: {
										   text: item.title
										 },
										 to: membe_id,
										 conversationType: 'C2C'
										});
										
										let promise2 = TUIChatService.getMessageList();
										uni.navigateTo({
											url: '/TUIKit/components/TUIChat/index'
										})
								    }
								});
						    }
						});
						
				    },
				})
					
				// emits("handleSwitchConversation", item.conversationID);
				
			},
			getGuessList() {
				this.$api.default.request('user/caini_list', {
					type: this.orderInfo.writer_uid != this.$db.get('userInfo').membe_id ? 0 : 1,
					oid: this.orderInfo.id
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.guessList = res.data
					}
				})
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
			// 删除图片
			deletePic(index) {
				this.form.w_refs_money_imgs.splice(index, 1)
				this.fileList2.splice(index, 1)
			},
			onChooseImg() {
				let auth = db.get('auth');
				console.log(auth, 777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				this.$common.chooseImage({}, (data) => {
					if (data) {
						this.form.w_refs_money_imgs.push(data)
					}
				}, 9)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form.w_refs_money_imgs.length
				lists.map((item) => {
					this.form.w_refs_money_imgs.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.form.w_refs_money_imgs[fileListLen]
					this.form.w_refs_money_imgs.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.uploadImgUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let datas = JSON.parse(res.data)
							this.fileList2.push(datas.url)
							setTimeout(() => {
								resolve(datas.url)
							}, 300)
						}
					});
				})
			},
			getUserInfo() {
				this.$api.default.request('user/userInfo', {
					uid: this.uid
				}).then((res) => {
					if (res.code) {
						this.userInfo = res.user
						if (!res.user.is_writer) {
							this.navIndex = 3
						}
						this.getList()
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			toImRoom() {
				console.log(133333333333)
				// if(this.$db.get('userInfo').membe_id == this.orderInfo.writer_uid){
				// 	console.log(111111111111111)
				// 	   this.$store.commit('createConversationActive', this.orderInfo.uid)
				// 		var url = '/pages/tim/room?userType=1&showbox=1&uid=' +  this.orderInfo.writer_uid
				// }else{
				// 	console.log(22222222222)
				// 	  this.$store.commit('createConversationActive', this.orderInfo.writer_uid)
				// 	  var url = '/pages/tim/room?userType=1&showbox=1&uid=' + this.orderInfo.uid
				// }
				
				// uni.navigateTo({
				// 	url: url
				// })
				
				if(!this.isClick){
					
					return
				}
				this.isClick = false
				let membe_id= this.$db.get('userInfo').membe_id == this.orderInfo.writer_uid ?  this.orderInfo.uid : this.orderInfo.writer_uid
				uni.request({
				    url: 'https://api.dreamyuewen.com/api/user/userInfo', 
				    data: {
				       uid: membe_id,
				    },
				    header: {
				        token: db.get('auth')
				    },
				    success: (res) => {
				        uni.setStorageSync("userItem",res.data.user);
						
						uni.request({
						    url: 'https://api.dreamyuewen.com/api/user/userPageList', 
						    data: {
						       uid: membe_id,
							   page: 1,
							   type: 1
						    },
						    header: {
						        token: db.get('auth')
						    },
						    success: (ress) => {
						        uni.setStorageSync("userPageList",ress.data.data.data);
								
								uni.request({
								    url: 'https://api.dreamyuewen.com/api/order/getTimOrderList', 
								    data: {
								       uid: membe_id,
								    },
								    header: {
								        token: db.get('auth')
								    },
								    success: (resss) => {
										setTimeout(()=> {
											this.isClick = true
										}, 2000);
								        uni.setStorageSync("orderList",resss.data.data);
										
										TUIConversationService.switchConversation('C2C'+membe_id);
										
										uni.navigateTo({
											url: '/TUIKit/components/TUIChat/index'
										})
								    }
								});
						    }
						});
				    },
				})
					
					
					
					
					
			},
			goToxie() {
				uni.navigateTo({
					url: '/pages/user/abount_dea?id=3' 
				})
			},
			submit() {
				let canEdit = this.orderInfo.status == 3 && this.orderInfo.is_gai == 1
				
				if (this.orderInfo.status == 2) {
					uni.navigateTo({
						url: '/pages/my/upload?form=1&id=' + this.orderInfo.id + '&is_gai=' + this.orderInfo.is_gai + '&canEdit=' + canEdit
					})
				}else if (this.orderInfo.status == 3 && this.orderInfo.is_gai != 1) {
					uni.navigateTo({
						// url: '/pages/my/upload?id=' + this.orderInfo.id + '&is_gai=' + this.orderInfo.is_gai + '&canEdit=' + canEdit
						
						url: '/pages/my/write?id=' + this.orderInfo.id + '&is_gai=' + this.orderInfo.is_gai + '&canEdit=' + canEdit
					})
				 }else if (this.orderInfo.status == 3 && this.orderInfo.is_gai == 1) {
					uni.navigateTo({
						url: '/pages/my/write?id=' + this.orderInfo.id + '&is_gai=' + this.orderInfo.is_gai + '&canEdit=' + canEdit
					})
				 }else if (this.orderInfo.status == 4 || this.orderInfo.status == 5) {
					uni.navigateTo({
						url: '/pages/my/check?type=3&id=' + this.orderInfo.id
					})
				 }else {
					
					this.$api.default.request('order/confirmOrder', {
						id: this.orderInfo.id
					}).then((res) => {
						if (res.code) {
							this.$common.successToShow(res.msg, () => {
								// this.orderInfo = res.data
								this.getOrderInfo()
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				}
			},
			getOrderInfo(id) {
				this.$api.default.request('order/orderInfo', {
					id: this.id
				}).then((res) => {
					if (res.code) {
						this.orderInfo = res.data
						this.getGuessList()
						
						if(this.orderInfo.ref_status == 1 && this.orderInfo.is_tk == 0 && this.orderInfo.status != 4 && !uni.getStorageSync('isShow')){
							this.dealPop = true
							
							uni.setStorageSync('isShow',1)
						}
						
						let title;
						if(this.orderInfo.status == 1 && this.orderInfo.writer_uid != this.$db.get('userInfo').membe_id){
							title = '等待接单'
						} else if(this.orderInfo.status == 4){
							title = '交易完成'
						} else{
							title = '正在交易'
						}
						
						uni.setNavigationBarTitle({
							title: title
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			goToindex() {
				this.$api.default.request('order/closeOrder', {
					id: this.orderInfo.id
				}).then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							// uni.redirectTo({
							// 	url: '/pages/index/index'
							// })
							uni.navigateBack({
							 	delta: 1
							 });
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.shen-box{
		background-color: #fff;
		padding: 15px;
		box-sizing: border-box;
		width: 300px;
		border-radius: 4px;
		
		.shen-title{
			font-family: 思源黑体;
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.shen-cont{
			margin-top: 8px;
			
			.label{
				font-family: 思源黑体;
				font-size: 12px;
				color: #999999;
			}
			
			.val{
				font-family: 思源黑体;
				font-size: 12px;
				color: #3D3D3D;
			}
		}
	}
	
	page {
		background: rgba(242, 245, 242, 1);
	}


	.content {
		padding: 20rpx 30rpx 200rpx !important;

		// .u-steps-item__wrapper{
		// 	width: auto !important;
		// 	height: auto !important;
		// }
		.dubox {
			margin-bottom: 20rpx;
			padding: 20rpx 30rpx;
			border-radius: 8px;
			background: #FFFFFF;
			position: relative;

			.xiaotxt {
				// top: 20rpx;
				// right: 33rpx;
				// position: absolute;
				float: right;
				font-size: 20rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #999999;
				margin-left: 10rpx;
			}

			.pingjia {
				top: 20rpx;
				right: 30rpx;
				position: absolute;
				width: 108rpx;
				height: 40rpx;
				border-radius: 4px;
				opacity: 1;
				background: rgba(69, 196, 176, 0.1);
				font-size: 20rpx;
				text-align: center;
				line-height: 40rpx;
				letter-spacing: 0.08em;
				color: #45C4B0;
			}
			
			.xiaotxt_red {
				font-family: '思源黑体';
				font-size: 10px;
				color: #FF0000;
			}
			
			.xiaotxt_green{
				font-family: '思源黑体';
				font-size: 10px;
				color: #45C4B0;
			}

			.title {
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
				padding-bottom: 20rpx;
			}

			.jietxt {
				padding-bottom: 8rpx;
				font-size: 16rpx;
				font-weight: normal;
				text-align: center;
				letter-spacing: 0em;
				color: #999999;
			}
		}

		.danbox {
			padding: 20rpx 30rpx 40rpx;
			background-color: #FFFFFF;
			border-radius: 8px;
			margin-bottom: 20rpx;

			.dantop {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			
				.head {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					flex-shrink: 0;
				}

				.dantitle {
					padding: 0 8rpx 0 20rpx;
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.danpic {
					width: 100rpx;
					height: 43rpx;
				}

				.danji {
					width: 100rpx;
					height: 43rpx;
				}

				.gt {
					background: rgba(#45C4B0, .15);
					color: #45C4B0;
					float: right;
					font-size: 26rpx;
					position: absolute;
					right: 65rpx;
					padding: 3px 10px 5px 10px;
					border-radius: 0.5em;
				}
			}

			.jcbox {
				display: flex;
				align-items: center;
				padding: 30rpx 0 10rpx;

				.jcpic {
					width: 32rpx;
					height: 32rpx;
				}

				.jctxt {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					padding-left: 12rpx;
				}
			}

			.dtxt {
				font-size: 20rpx;
				color: #3D3D3D;
				padding-bottom: 5rpx;

				text {
					padding-left: 8rpx;
					font-size: 20rpx;
					color: #999999;
				}
			}

			.gong {
				font-size: 20rpx;
				color: #999999;
				padding-bottom: 44rpx;

				text {
					font-size: 36rpx;
					color: #3D3D3D;
					padding: 0 8rpx;
					font-weight: bold;
				}
			}

			.zhibox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 60rpx;

				.zhitxt {
					font-size: 28rpx;
					font-weight: normal;
					letter-spacing: 0em;
					color: #999999;
				}

				.daytxt {
					font-size: 28rpx;
					font-weight: bold;
					color: #3D3D3D;
					
				}
				.beizhu{
					overflow-wrap:break-word;
					width: 60%;
					text-align: right;
				}

				.hui {
					color: #999999;
				}

				.red {
					color: #F24D39;

					text {
						color: #F24D39;
						font-size: 20rpx;
						font-weight: 500;
					}
				}
			}

			.jiatxt {
				font-size: 20rpx;
				font-weight: normal;
				text-align: right;
				letter-spacing: 0em;
				color: #999999;

				text {
					font-size: 36rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}
			}
		}

		.timebox {
			height: 120rpx;
			border-radius: 8px;
			opacity: 1;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.txt {
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
			}

			.qitxt {
				font-size: 28rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #999999;
			}
		}

		.xuzhi {
			font-size: 20rpx;
			font-weight: normal;
			line-height: 28rpx;
			color: #999999;

			text {
				color: #45C4B0;
			}
		}

		.dibox {
			z-index: 66;
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #ffffff;
			width: 100%;
			padding: 20rpx 0;
			box-shadow: 0px -8px 20px 0px rgba(69, 196, 176, 0.2);

			.zaibox {
				width: 630rpx;
				height: 80rpx;
				border-radius: 12px;
				background: #3D3D3D;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto 10rpx;

				.zaileft {
					padding-left: 15rpx;

					.dbox {
						display: flex;
						align-items: center;

						.zaititle {

							font-size: 28rpx;
							font-weight: bold;
							background: linear-gradient(293deg, #45C4B0 -5%, #56E8B5 128%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
							text-fill-color: transparent;

						}

						.text {
							font-size: 28rpx;
							font-weight: bold;
							color: #FFFFFF;
							padding-left: 8rpx;
						}
					}

					.zaitxt {
						font-size: 20rpx;
						font-weight: normal;
						letter-spacing: 0px;
						color: #999999;
						white-space: nowrap;
					}
				}

				.que {
					width: 190rpx;
					height: 80rpx;
					border-radius: 12px;
					opacity: 1;
					background: #45C4B0;
					font-size: 24rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;
				}
				
				.que2 {
					width: 190rpx;
					height: 80rpx;
					border-radius: 12px;
					opacity: 1;
					background: #999;
					font-size: 24rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;
				}
			}

			.xiebox {
				display: flex;
				align-items: center;
				justify-content: center;

				.xietxt {
					font-size: 20rpx;
					font-weight: bold;
					color: #999999;

					text {
						font-size: 20rpx;
						font-weight: bold;
						color: #45C4B0;
						padding: 0 10rpx;
					}
				}
			}
		}

		.mask {
			background-color: #ffffff;
			width: 534rpx;
			border-radius: 8px;
			padding-top: 48rpx;

			.matitle {
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				letter-spacing: 0em;
				color: #3D3D3D;
				padding-bottom: 6rpx;
				line-height: 46rpx;
			}

			.matxt {
				font-size: 24rpx;
				font-weight: normal;
				text-align: center;
				letter-spacing: 0em;
				color: #999999;
				line-height: 34rpx;
				padding-bottom: 50rpx;
			}

			.quque {
				display: flex;
				align-items: center;
				border-top: 1px solid rgba(153, 153, 153, 0.1);

				.quli {
					width: 50%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: normal;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.quactive {
					background: rgba(69, 196, 176, 0.05);
				}
			}
		}
	}
	
	.new-step-box {
		margin-top: 10rpx;
	
		.new-step-top {
			display: flex;
			align-items: center;
			justify-content: center;
	
			.line {
				width: 126rpx;
				height: 6rpx;
				background: #999999;
				border-radius: 0;
			}
	
			.activeLine {
				background: #45C4B0;
			}
	
			.stopLine {
				background: linear-gradient(to right, #45C4B0 0%, #999 50%, #ED3232 100%);
			}
			
			.stopLine2 {
				background: linear-gradient(to right, #45C4B0 0%, #999 50%, #ED3232 100%);
				// background: linear-gradient(to right, #45C4B0 0%, #999 100%);
			}
			
			.stopLine3 {
				background: linear-gradient(to right, #ED3232 0%, #ED3232 50%, #ED3232 100%);
			}
	
			.circle {
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #999999;
	
				text {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #fff;
				}
			}
	
			.circle.pass {
				background-color: #45C4B0;
			}
	
			.circle.stop {
				background-color: #ED3232;
			}
		}
	
		.new-step-bot {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: Source Han Sans CN;
			font-size: 20rpx;
			font-weight: bold;
			color: #999;
	
			.pass {
				color: #45C4B0;
			}
	
			.stop {
				color: #ED3232;
			}
		}
	}
	
	.biaoqian {
	
		border-radius: 0.5em;
		background: #fff;
		width: 550rpx;
		margin: 0 auto;
	
		.top {
			padding-top: 70rpx;
			font-size: 28rpx;
			color: #000;
			text-align: center;
			width: 90%;
			margin-left: 5%;
			margin-bottom: 15rpx;
	
			image {
				width: 130rpx;
				height: 130rpx;
				position: absolute;
				left: 265rpx;
				top: -35px;
				margin: 0 auto;
				border-radius: 20em;
			}
	
			view {
				&:first-child {
					font-weight: 700;
					font-size: 16px;
					color: #3D3D3D;
				}
	
				&:last-child {
					margin-top: 6px;
					font-size: 12px;
					color: #999;
	
					font-weight: 700;
				}
	
			}
	
			.font_red {
				color: #ED3232 !important;
			}
		}
	
		.info_line {
			margin: 0 30rpx;
			font-family: '思源黑体';
			font-size: 14px;
			color: #999999;
			margin-bottom: 15rpx;
	
			.info_line_left {
				font-family: '思源黑体';
				font-weight: bold;
				color: #3D3D3D;
				white-space: nowrap;
			}
		}
	
		.tab {
			padding-top: 5rpx;
			font-size: 21rpx;
			font-weight: 700;
			width: 90%;
			margin-left: 5%;
			float: left;
			text-align: center;
	
			.textarea,
			textarea {
				width: 88%;
				// font-weight: 500;
				font-size: 24rpx;
				font-weight: normal;
				background: rgba(216, 216, 216, 0.3);
				padding: 10px 10px;
	
	
				padding-bottom: 20px;
				margin-left: 16rpx;
				border-radius: 0.5em;
				text-align: center;
				float: left;
				color: #999;
				text-align: left;
				height: 100px;
			}
	
			.c1 {
				opacity: 1;
				font-family: Source Han Sans CN;
				font-size: 12px;
				font-weight: normal;
				line-height: normal;
				letter-spacing: 0em;
				color: #999999;
			}
		}
	
		.not_like {
			width: 86%;
			margin-left: 7%;
			border-radius: 0.5em;
			text-align: center;
			float: left;
			color: #999;
			font-size: 27rpx;
			margin-top: 40rpx;
			text-align: left;
			padding-bottom: 20px;
			background: rgba(216, 216, 216, 0.3);
	
			.tp {
				padding: 5px 10px;
				font-size: 12px;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			}
	
			image {
				margin-top: 5px;
				width: 60px;
				height: 60px;
				float: left;
				border-radius: 0.5em;
				margin-left: 5px;
	
				&:first-child {
					margin-left: 0px;
				}
			}
		}
	
		.not_like2 {
			margin: 0 30rpx;
			border-radius: 0.5em;
			text-align: center;
			color: #999;
			font-size: 27rpx;
			text-align: left;
			padding-bottom: 10px;
	
			.tp {
				padding: 5px 10px;
				font-size: 12px;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			}
	
			image {
				margin-top: 5px;
				width: 60px;
				height: 60px;
				border-radius: 0.5em;
				margin-left: 5px;
	
				&:first-child {
					margin-left: 0px;
				}
			}
		}
	
		.imgView {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 15rpx;
	
			.imgList:nth-child(4n) {
				margin-right: 0;
			}
	
			.imgList {
				position: relative;
				padding-bottom: 10rpx;
				margin-right: 23rpx;
	
				.imgClose {
					position: absolute;
					top: -2px;
					right: -2px;
					z-index: 1;
					width: 24rpx;
					height: 24rpx;
					background-color: #45C4B0;
					color: #fff;
					line-height: 24rpx;
					text-align: center;
					border-radius: 100px;
				}
			}
	
			.imgList:not(:first-child) {
				// margin-left: 15rpx;
			}
		}
	
		.line {
			margin-top: 30rpx;
			width: 88%;
			margin-left: 6%;
			float: left;
			height: 0px;
			opacity: 1;
			border: 1rpx solid rgba(153, 153, 153, 0.1);
		}
	
		.cont_t {
			border-radius: 8px;
			opacity: 1;
			background: #45C4B0;
			width: 80%;
			height: 86rpx;
			margin-left: 10%;
			margin-right: 10%;
			text-align: center;
			margin-top: 30rpx;
			color: #fff;
			line-height: 86rpx;
		}
	
		.cont_t_refuse {
			background: #F2F5F2;
			color: #999999;
		}
	
		.cont_b {
			width: 100%;
			text-align: center;
			margin-top: 20rpx;
			background: rgba(69, 196, 176, 0.05);
			float: left;
			width: 92%;
			height: 86rpx;
			margin-left: 4%;
			color: #45C4B0;
	
			.t1 {
				width: 50%;
				margin: 0 auto;
				margin-top: 20rpx;
	
				image {
					width: 33rpx;
					;
					height: 33rpx;
					float: left;
				}
	
				.tex {
					float: left;
					margin-left: 10rpx;
				}
			}
	
	
		}
	}
	
	.cl1 {
		height: 60rpx;
		width: 60rpx;
		position: relative;
		top: 110rpx;
	}
	
	.zhezhao {
		height: 100vh;
		position: fixed;
		top: 0rpx;
		right: 0px;
		width: 100%;
		z-index: 101;
		background: rgba(51, 51, 51, 0.6);
	}
	
	.zong {
		position: fixed;
		width: 90%;
		text-align: center;
		margin: 0 auto;
		// margin-left: 5%;
		top: 15%;
		z-index: 102;
	}
	
	.reason_box {
		margin: 30rpx 40rpx;
		background: rgba(216, 216, 216, 0.3);
		border-radius: 0.5em;
		padding: 10px 10px;
		font-family: Source Han Sans CN;
		font-size: 12px;
		color: #3D3D3D;
	
		.centxt {
			color: #999999;
		}
	
		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 5rpx;
		}
	}
	
	.guess-box {
		border-radius: 8px;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		padding: 0 30rpx;
	
		.title {
			font-family: Source Han Sans CN;
			font-size: 28rpx;
			font-weight: bold;
			color: #3D3D3D;
			padding-top: 40rpx;
			padding-bottom: 20rpx;
			
			.font{
				font-family: '思源黑体';
				font-size: 10px;
				color: #999999;
				font-weight: 400;
			}
		}
	
		.display-flex {
			justify-content: space-between;
			flex-wrap: wrap;
		}
	
		.guess-item {
			width: 300rpx;
			// height: 80rpx;
			// line-height: 80rpx;
			// white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;
			padding: 20rpx 5rpx;
			box-sizing: border-box;
			background: rgba(#D8D8D8, .3);
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			font-family: Source Han Sans CN;
			font-size: 22rpx;
			text-align: center;
		}
	}
	
	.openor {
		justify-content: center;
		font-family: Source Han Sans CN;
		font-size: 12px;
		color: #999;
	
		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 5rpx;
		}
	}
	
	.order-box {
		border-radius: 8px;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		padding: 30rpx;
	
		.order-item {
			justify-content: space-between;
			margin-bottom: 30rpx;
	
			.txt {
				font-family: Source Han Sans CN;
				font-size: 14px;
				font-weight: bold;
				color: #3D3D3D;
			}
	
			.qitxt {
				font-family: Source Han Sans CN;
				font-size: 14px;
				color: #999999;
			}
		}
		
		.part{
			font-family: '思源黑体';
			font-size: 14px;
			color: #999999;
		}
		
		.tui-btn{
			font-family: '思源黑体';
			font-size: 14px;
			font-weight: bold;
			color: #45C4B0;
		}
	}
	
	.current-comment{
		background-color: #fff;
		padding: 40rpx 30rpx;
		border-radius: 8px;
		margin-bottom: 20rpx;
		
		.current-line{
			
			
			.avatar{
				width: 40px;
				height: 40px;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			
			.name{
				max-width: 400rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-family: '思源黑体';
				font-size: 14px;
				font-weight: bold;
				color: #3D3D3D;
			}
			
			.good {
				margin-left: 10rpx;
				display: inline-block;
				padding: 2rpx 8rpx;
				background: rgba(44, 211, 124, 0.15);
				font-size: 20rpx;
				font-weight: normal;
				letter-spacing: 0.08em;
				color: #2CD37C;
			}
			
			.red{
				background: rgba(236, 87, 109, 0.15);
				color: #ec576d;
			}
			
			.yellow{
				background: rgba(255, 170, 0, 0.15);
				color: #ffaa00;
			}
			
			// .spic {
			// 	width: 40rpx;
			// 	height: 40rpx;
			// }
		}
		
		.current-line2{
			margin: 20rpx 0;
			font-family: '思源黑体';
			font-size: 12px;
			color: #3D3D3D;
			
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			word-break: break-all;
		}
		
		.current-line3{
			font-family: '思源黑体';
			font-size: 12px;
			color: #999999;
			
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	
	.mask2 {
		background: #F2F5F2;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		overflow: hidden;
	
		.matop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 68rpx;
			// margin-bottom: 20rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			background-color: #ffffff;
	
			.mapic {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}
	
			.matxt {
				flex-grow: 1;
				font-size: 28rpx;
				padding: 0 16rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
		}
	
		.qubox {
			line-height: 120rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 0em;
			color: #3D3D3D;
			height: 120rpx;
			opacity: 1;
			background: #FFFFFF;
		}
	}
	
	.time {
		display: flex;
		align-items: center;
		.starbox_wrap{
			display: flex;
			align-items: center;
			margin-right: 32rpx;
			.tit{
				font-size: 20rpx;
				color: #999999;
				white-space: nowrap;
			}
		}
		.spic {
			width: 16rpx;
			height: 16rpx;
			margin-left: 2px;
		}
	}
	
	.starbox {
			font-size: 24rpx;
			color: #999999;
		
	}
	
	.time_model{
		display: flex;
		align-items: center;
		font-weight: bold;
	}
</style>